<template>
  <div :class="isIfm?'pr5':''">
    <Add :formId="formId" ref="add" @ok="search"></Add>
    <Update ref="update" @ok="search"></Update>
    <ZgNewPage
      ref="page"
      title="字段管理"
      addBtnName="新增字段"
      addBtnIcon="plus-circle"
      :extraHeight="320-(isIfm?90:0)"
      :labelCol="8"
      :scrollX="1500"
      :conditions="conditions"
      :batchBtns="batchBtns"
      :dataBtns="dataBtns"
      @search="onSearch"
      @add="toAdd"
      @batch="toBatch"
      @admin="toAdmin"
    >
      <template slot="columns">
        <a-table-column :width="150" title="字段名称" dataIndex="name"></a-table-column>
        <a-table-column :width="150" title="字段编码" dataIndex="code"></a-table-column>
        <a-table-column :width="100" title="表单类型" >
          <template slot-scope="text,record">
            <a-tag size="small">{{ record.compType }}</a-tag>
          </template>
        </a-table-column>
        <a-table-column :width="100" title="数据类型" >
          <template slot-scope="text,record">
            <a-tag size="small">{{ record.dataType }}</a-tag>
          </template>
        </a-table-column>
        <a-table-column :width="100" title="扩展属性" >
          <template slot-scope="text,record">
            <a-popover v-if="record.extra&&record.extra!=='{}'" placement="topLeft">
              <template slot="content">
                <ZgJsonViewer :value="JSON.parse(record.extra)"/>
              </template>
              <div class="primary cpt">查看</div>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column :width="160" title="默认值" dataIndex="defaultVal">
          <template slot-scope="text,record">
            <div v-if="record.defaultVal&&record.defaultVal.length>0">
              <a-popover v-if="['富文本','多行文本'].includes(record.compType)" placement="topLeft">
                <template slot="content">
                  <div v-if="['富文本'].includes(record.compType)" v-html="record.defaultVal"></div>
                  <div v-if="['多行文本'].includes(record.compType)">{{ record.defaultVal }}</div>
                </template>
                <div class="primary cpt">查看</div>
              </a-popover>
              <span v-else>{{ record.defaultVal }}</span>
            </div>
          </template>
        </a-table-column>
        <a-table-column :width="80" title="模糊匹配">
          <template slot-scope="text,record">
            <a-tag size="small" :color="record.isLike?'blue':'#DDD'">{{ record.isLike?'是':'否' }}</a-tag>
          </template>
        </a-table-column>
        <a-table-column :width="200" title="正则表达式" dataIndex="regex"></a-table-column>
        <a-table-column title="错误提示语" dataIndex="errorMsg"></a-table-column>
      </template>
    </ZgNewPage>
  </div>
</template>
<script>
import Add from './AddDialog'
import Update from './UpdateDialog'
import { pageMixin } from '@/core/page-mixin'

export default {
  props: {
    formId: {
      type: String,
      default: ''
    }
  },
  mixins: [pageMixin],
  components: {
    Add, Update
  },
  data () {
    return {
      pageCode: 'autoform-column',
      initFormId: '',
      conditions: [
        { code: 'name', compType: '单行文本', label: '字段名称', defaultVal: '' },
        { code: 'code', compType: '单行文本', label: '字段编码', defaultVal: '' },
        { code: 'compType', compType: '字典', label: '表单类型', defaultVal: '', extra: { 字典类型: 'compType' } }
      ],
      batchBtns: [
        { key: 1, label: '批量删除', name: '批量删除', code: '' },
        { key: 2, label: '同步库表', name: '同步库表', code: '' }
      ],
      dataBtns: [
        { key: 1, name: '删除', code: '', type: 'link', icon: 'fa-trash', isShow: () => { return true } },
        { key: 2, name: '修改', code: '', type: 'link', icon: 'fa-pencil', isShow: () => { return true } }
      ]
    }
  },
  mounted () {
    this.initFormId = this.$route.query.formId || ''
    // 和小助手通信逻辑
    this.$eventBus.$off('order')
    this.$eventBus.$on('order', (msg) => {
      if (msg.flag === this.pageCode) {
        if (msg.order === 'dataList') {
          this.$refs.page.setPageIds(msg.dataList.map(x => {
            return x.id
          }))
        }
      }
    })
  },
  watch: {
    formId () {
      this.search()
    }
  },
  methods: {
    search () {
      const pageRef = this.$refs.page
      if (pageRef) {
        pageRef.search()
      } else {
        setTimeout(() => {
          this.search()
        }, 50)
      }
    },
    onSearch (param) {
      if (this.formId.length === 0) {
        return
      }
      this.$http.get('/zg-autoform/column/page',
        Object.assign({ formId: this.formId }, param), data => {
        this.$refs.page.endSearch(
          {
            total: parseInt(data.total),
            list: data.records.map(t => {
              t.key = t.id
              return t
            })
          }
        )

        // 填充场景数据
        this.SET_CONTEXT({
          flag: this.pageCode,
          // 数据列表
          dataList: data.records.map((t, i) => {
            return {
              index: i + 1,
              id: t.id
            }
          }),
          // 筛选条件
          condition: this.setCondition(this.conditions),
          // 按钮操作
          operate: this.operatesArr({ dataBtns: this.dataBtns, batchBtns: this.batchBtns }),
          // 视图字段
          form: []
        })
      })
    },
    toAdd () {
      this.$refs.add.open()
    },
    toAdmin (param) {
      if (param.key === 1) {
        this.confirm(
        () => {
          this.$http.post('/zg-autoform/column/del', [param.obj.id], () => {
            this.search()
          })
        },
        '确定要删除这条数据么')
      } else if (param.key === 2) {
        this.$refs.update.open(param.obj)
      }
    },
    toBatch (opt) {
      if (opt.key === 1) {
        this.$refs.page.checkIds(ids => {
          this.$http.post('/zg-autoform/column/del', ids, () => {
            this.search()
          })
        }, '确定要批量删除这些数据')
      } else if (opt.key === 2) {
        this.confirm(
        () => {
          this.$http.post('/zg-autoform/column/sync', this.formId, () => {
            this.$success({ title: '同步成功!' })
          })
        },
        '确定要将字段数据同步到数据库么')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
